<template>
  <div class="container">
    <div class="app-container">
      <!-- expand-on-click-node 只有点击左侧箭头的时候才收缩展开 -->
      <el-card v-loading="loading">
        <el-tree
          :data="departs"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="{ data }">
            <el-row style="width: 100%">
              <!-- 左边 -->
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <!-- ctrl + i -->
              <!-- 右边 -->
              <el-col :span="4">
                <el-row>
                  <el-col :span="12">{{ data.managerName }}</el-col>
                  <el-col :span="12">
                    <el-dropdown @command="handleCommand($event, data.id)">
                      <span>
                        操作<i class="el-icon-arrow-down el-icon--right" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          command="ADD"
                        >添加子部门</el-dropdown-item>
                        <el-dropdown-item command="EDIT">编辑</el-dropdown-item>
                        <el-dropdown-item command="DEL">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- //!自定义事件处的 $event 永远永远永远是子组件进行 $emit 的的时候的第二个参数 -->
    <!-- <add-dept :show-dialog="showDialog" @update:showDialog="showDialog = $event" /> -->
    <!-- //!和上面完全等价 -->
    <!-- <add-dept :show-dialog="showDialog" :current-node-id="currentNodeId" @updateList="getDepartments" @update:showDialog="showDialog = $event" /> -->
    <!-- 和上面等价 -->
    <add-dept ref="addDeptRef" :show-dialog.sync="showDialog" :current-node-id="currentNodeId" @updateList="getDepartments" />
  </div>
</template>
<script>
import { getDepartments, delDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Department',
  components: {
    AddDept
  },
  data() {
    return {
      departs: [],
      defaultProps: { label: 'name' },
      showDialog: false,
      currentNodeId: null, // 记录当前点击的 id，以后要当做添加时候的 pid
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      // 后端返回的数据是数组格式的，规律可以通过 pid 和 id 组成树状的
      // 1. 你找后端
      // !2. 自己处理
      this.loading = true
      this.departs = transListToTreeData(await getDepartments(), 0)
      this.loading = false
    },
    async handleCommand(command, id) {
      // !点击添加按钮记录一下（这个记录操作提到这）
      this.currentNodeId = id
      if (command === 'ADD') {
        this.showDialog = true
      } else if (command === 'EDIT') {
        // #1 显示弹框
        this.showDialog = true
        // #2 调用子组件获取数据并填充的方法
        // !只要拿到组件实例，组件实例上的 data 和 methods 可以直接使用
        // !props 数据传递是异步的，传递过去的数据不能马上使用，是拿不到的
        // 解决方法1
        // this.$refs.addDeptRef.getDepartDetail(id)
        // 解决方法2 $nextTick
        this.$nextTick(async() => {
          await this.$refs.addDeptRef.getDepartDetail()
          // this.showDialog = true
        })
        // this.$nextTick(this.$refs.addDeptRef.getDepartDetail)
      } else if (command === 'DEL') {
        try {
          await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            type: 'warning'
          })
          // 后端删了
          await delDepartments(id)
          // 重新获取
          this.getDepartments()
          this.$message.success('删除成功!')
        } catch (e) {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      }
    }
  }
}
</script>
